<template>
    <div class="MyTable">
      <div :class="opic">
        <el-table
          id="tableDataId"
          ref="Table"
          :height="tableH"
          :stripe="stripe"
          :data="tableData"
          :border="border"
          :row-class-name="tableRowClassName"
          style="width: 100%;overflow-y: auto;"
        >
          <el-table-column
            type="selection"
            label="选择"
            width="55">
          </el-table-column>
          <el-table-column
            v-if="showIndex"
            fixed="left"
            label="序号"
            :align="'center'"
            width="50"
          >
            <template slot-scope="scope">
              {{ (paginationData.current - 1) * paginationData.pageSize + scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column
            v-for="(item, index) in columnData"
            :key="index"
            :fixed="item.fixed || false"
            :align="item.align || 'center'"
            :prop="item.prop"
            :label="item.label"
            :min-width="item.minWidth"
          />
          <el-table-column
            v-if="showOperate"
            label="模型参数"
            width="200"
            fixed="right"
            :align="'center'"
          >
            <template slot-scope="scope">
              <!-- 操作按钮插槽 -->
              <el-button v-for="(item, index) in operateBtn" :key="index" :type="item.type" :icon="item.icon" @click="handleClick(scope.row, item.event)">
                {{ item.label }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination
          :current-page="paginationData.current"
          :page-sizes="paginationData.size"
          :page-size="paginationData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="paginationData.total"
          :locale="locale"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </template>
  <script>
  import { locale as zhLocale } from 'element-ui/lib/locale/lang/zh-CN'
  export default {
    name: 'MyTable',
    props: {
      // 分页时是否调用接口
      isCallApi: {
        type: Boolean,
        default: false
      },
      // 是否显示索引
      showIndex: {
        type: Boolean,
        default: false
      },
      // 是否显示操作按钮
      showOperate: {
        type: Boolean,
        default: false
      },
      // 是否开去栅格条纹
      stripe: {
        type: Boolean,
        default: false
      },
      // 是否有边框
      border: {
        type: Boolean,
        default: false
      },
      // 表格数据
      tableData: {
        type: Array,
        default: () => {
          return []
        }
      },
      // 表格列数据
      columnData: {
        type: Array,
        default: () => {
          return []
        }
      },
      // 右侧操作按钮
      operateBtn: {
        type: Array,
        default: () => {
          return []
        }
      },
      paginationData: {
        type: Object,
        default: () => {
          return {
            current: 1, // 当前页
            pageSize: 100, // 每页条数
            size: [5, 10, 20, 30],
            total: 0 // 总条数
          }
        }
      }
    },
    data() {
      return {
        tableH: 'calc(100% - 30px)',
        opic: 'class_one',
        current: 1, // 当前页
        locale: zhLocale // 中文
      }
    },
    methods: {
      // 表格点击操作
      handleClick(row, event) {
        this.$emit('handleClick', row, event)
      },
      // 分页条数改变
      handleSizeChange(size) {
        this.$emit('pageSizeChange', size)
      },
      // 分页页数改变
      handleCurrentChange(current) {
        this.$emit('pageCurrentChange', current)
      },
      // 自定义行类名
      tableRowClassName({ row, rowIndex }) {
        return 'custom-row-height'
      }
    }
  }
  </script>
  <style lang="scss">
    .MyTable{
      height: 100%;
      width: 100%;
      .class_one{
        width: 100%;
        height: calc(100% - 30px);
      }
      .class_two{
        width: 100%;
        height: calc(100% - 60px);
      }
    }
    // 分页
    .el-pagination{
      display: flex !important;
      justify-content: center !important;
    }
  
    // 自定义行高度
    .el-table .custom-row-height {
      height: 30px; // 设置行高
    }
  </style>
  